<!doctype html>
<html lang="en" class="classic" style="--inner-height:100vh;">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/svg/earth.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
        :root {
            --inner-height: 100vh;
        }

        @supports (-webkit-touch-callout: none) {
            :root {
                --inner-height: -webkit-fill-available;
            }
        }
    </style>
    <script>
        (function () {
            /**
             * 去掉一些莫名其妙的警告
             */
            if (typeof EventTarget !== "undefined") {
                let func = EventTarget.prototype.addEventListener;
                EventTarget.prototype.addEventListener = function (type, fn, capture) {
                    this.func = func;
                    if (typeof capture !== "boolean") {
                        capture = capture || {};
                        capture.passive = false;
                    }
                    this.func(type, fn, capture);
                };
            }
        }())
    </script>
    <title>ZMS管理系统</title>
</head>
<body>
<div id="app" app-main>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html, body, #app {
            height: 100%;
        }

        .app-loading {
            background: #181818;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .app-animate__loader {
            color: #fff;
            width: 6px;
            aspect-ratio: 1;
            border-radius: 50%;
            animation: animateLoading-1 .75s infinite linear alternate,
            animateLoading-2 1.5s infinite linear;
        }

        @keyframes animateLoading-1 {
            0%, 20% {
                box-shadow: 30px 0 0 3px, 10px 0 0 3px, -10px 0 0 3px, -30px 0 0 3px
            }
            60%, 100% {
                box-shadow: 12px 0 0 3px, 14px 0 0 6px, -14px 0 0 6px, -12px 0 0 3px
            }
        }

        @keyframes animateLoading-2 {
            0%, 25% {
                transform: rotate(0)
            }
            50%, 100% {
                transform: rotate(.5turn)
            }
        }

        .app-text__loader {
            font-size: 14px;
            color: #aaa;
            line-height: 7em;
        }

        .app-text__loader::before {
            content: '正在玩命载入资源中,请稍等!'
        }
    </style>
    <div class="app-loading">
        <div class="app-animate__loader"></div>
        <div class="app-text__loader"></div>
    </div>
</div>
</body>
<script type="module" src="/src/apps/admin/main.ts"></script>
<script lang="ts" type="module">
    import {checkSystemUpdate} from "./common.ts";

    checkSystemUpdate(300000)
</script>
</html>
